<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0px; margin:0px}
.box{width:100px; height:100px; border-radius:100px 100px 5px 100px; background:red;}
.class{display:none;}
</style>
<script src="jquery-1.10.1.js"></script>
<script>
$(function(){
	var flake=$('.box').css({'position':'absolute','top':'-200px','transform':'rotate(45deg)'});
	var screenWidth=$(window).width();
	var screenHeight=$(window).height();
	setInterval(function(){
		var startPositionLeft=Math.random()*screenWidth;
		var endPositionLeft=Math.random()*screenWidth;
		var startOpacity=0.7+Math.random()*0.3;
		var endPositionTop=screenHeight;
		var flakeSize=5+Math.random()*50;
		var time=3000+Math.random()*7000;
	
	flake.clone().appendTo('body').css({
		'left':startPositionLeft,
		'opaity':startOpacity,
		'font-size':flakeSize,
		'color':'white'
	}).animate({
		'left':endPositionLeft,
		'opacity':0.5,
		'top':endPositionTop
	},time,function(){
		$(this).remove();
	})
	$('.box').click(function(){
		$(this).hide()
	})
	},1000)
})
</script>
</head>

<body style="background:#000; overflow:hidden">
<div class="box"></div>
</body>
</html>
